<template>
  <!--模板-->
    indexedDB 的查询演示
  <hr>
  <el-button type="" @click="manage.start">设置数据</el-button>
  <nf-find
    :queryMini="queryMini"
    :querys="querys"
    v-bind="findMeta"
  >
  </nf-find>
  <hr>
  <!--表单控件-->
  <nf-grid
    v-bind="gridMeta"
    :dataList="manage.dataSource"
    size="small"
  />
  <el-row :gutter="20">
    <el-col :span="10">
      简洁模式：
      <div
        v-for="(item, key, index) in queryMini"
        :key="index"
      >
        {{key}}： {{item}}
      </div>
    </el-col>
    <el-col :span="14">
      标准模式：
      <div
        v-for="(item, key, index) in querys"
        :key="index"
      >
        {{key}}： {{item}}
      </div>
    </el-col>
  </el-row>
  <hr>
  
</template>

<script lang="ts">
  import { defineComponent, reactive, watch } from 'vue'

  import { nfGrid, nfFind } from '../../../lib/main'
  import dbManage from '../../store/find-db-controller'
  import _findMeta from './find.json'
  import _gridMeta from './grid.json'
  

  export default defineComponent({
    name: 'nf-ui-elp-find',
    components: {
      nfGrid, 
      nfFind
    },
    props: {
    },
    setup(props, context) {

      // 获取表单控件需要的meta
      const findMeta = reactive(_findMeta)

      // 根据 meta 创建表单的 model
      const queryMini = reactive({})
      const querys = reactive([])
      const gridMeta = reactive(_gridMeta)

      const manage = dbManage()

      watch(queryMini, () => {
        manage.find()
      })
      
      return {
        gridMeta,
        manage,
        findMeta,
        querys,
        queryMini
      }
    }
  })
</script>